<template>
	<div id="productType">
		<el-form :inline="true" :model="formInline" class="demo-form-inline">
		  <el-form-item label="请输入名称">
		    <el-input v-model="formInline.productTypeName" placeholder="类型名称"></el-input>
		  </el-form-item>
		  <el-form-item label="请选择类型">
		    <el-select v-model="formInline.level" placeholder="类型级别">
		      <el-option label="一级类型" value="1"></el-option>
		      <el-option label="二级类型" value="2"></el-option>
			    <el-option label="三级类型" value="3"></el-option>
		    </el-select>
		  </el-form-item>
		  <el-form-item>
		    <el-button type="primary" @click="onSubmit">查询</el-button>
		  </el-form-item>
		</el-form>
		
		
		<div class="add"><a href="#" @click="add"><i class="el-icon-circle-plus-outline " style="margin: 6px;"></i>新增</a></div>
		<template>
		  <el-table
		    :data="productType"
		    stripe
		    style="width: 100%">
		    <el-table-column
		      prop="id"
		      label="编号"
		      width="180">
		    </el-table-column>
		    <el-table-column
		      prop="productTypeName"
		      label="类型名称"
		      width="180">
		    </el-table-column>
			<el-table-column
			  prop="level"
			  label="类型级别">
			  <template slot-scope="scope">
			    <span v-if="scope.row.level=='1'">一级类型</span>
			    <span v-else-if="scope.row.level=='2'" style="color: #F56C6C">二级类型</span>
			  </template>
			</el-table-column>
			<el-table-column
			    prop="22"
			    label="操作"
			    width="160">
			  <template slot-scope="scope">
				   <el-button
				            size="mini"
				            @click="upOne(scope.row.id)">修改
					</el-button>
				    <el-button
				            size="mini"
				            type="danger"
				            @click="delOne(scope.row.id)">删除
					</el-button>
				   
			  </template>
			</el-table-column>
		  </el-table>
		  
		  <!--分页插件-->
		  <div id="cell" class="page">
		    <el-pagination
		       @size-change="handleSizeChange"
		       @current-change="handleCurrentChange"
		       :current-page="currentPage"
		       :page-sizes="[5, 6, 10, 20]"
		       :page-size="pageSize"
		       layout="total, sizes, prev, pager, next, jumper"
		       :total="total">
		    </el-pagination>
		  </div>
		  <el-drawer
		  
		    :visible.sync="dialog"
		    direction="ltr"
		    custom-class="demo-drawer"
		    ref="drawer"
		    >
		    <div class="demo-drawer__content">
		      <el-form :model="form">
		        <el-form-item label="商品类型名称" :label-width="formLabelWidth">
		          <el-input v-model="form.productTypeName" autocomplete="off"></el-input>
		        </el-form-item>
		        <el-form-item label="(上架/下架)" :label-width="formLabelWidth">
		          <el-select v-model="form.productTypeStatus" placeholder="请选择">
		            <el-option label="上架" value="1"></el-option>
		            <el-option label="下架" value="2"></el-option>
		          </el-select>
		        </el-form-item>
		      </el-form>
		      <div class="demo-drawer__footer">
				 
		        <el-button @click="cancelForm">取 消</el-button>
		     	<el-button type="primary" @click="upOne2()">修改</el-button>
		      </div>
		    </div>
		  </el-drawer>
		  <el-drawer
		    :visible.sync="dialog2"
		    direction="ltr"
		    custom-class="demo-drawer"
		    ref="drawer"
		    >
		    <div class="demo-drawer__content">
		      <el-form :model="form2">
		       <el-form-item label="商品类型名称" :label-width="formLabelWidth">
		         <el-input v-model="form2.productTypeName" autocomplete="off"></el-input>
		       </el-form-item>
		       <el-form-item label="父级类型" :label-width="formLabelWidth">
		         <el-select v-model="form2.parentId" placeholder="请选择">
		           <el-option label="生活用品" value="1"></el-option>
		           <el-option label="果蔬" value="2"></el-option>
		       	<el-option label="食品饮料" value="3"></el-option>
		       	<el-option label="服饰" value="8"></el-option>
		         </el-select>
		       </el-form-item>
		       <el-form-item label="类型级别" :label-width="formLabelWidth">
		         <el-select v-model="form2.level" placeholder="请选择">
		           <el-option label="一级分类" value="1"></el-option>
		           <el-option label="二级分类" value="2"></el-option>
		         </el-select>
		       </el-form-item>
		       <el-form-item label="商品类型状态" :label-width="formLabelWidth">
		         <el-select v-model="form2.productTypeStatus" placeholder="请选择">
		           <el-option label="上架" value="01"></el-option>
		           <el-option label="下架" value="02"></el-option>
		         </el-select>
		       </el-form-item>
		      </el-form>
		      <div class="demo-drawer__footer">
		        <el-button @click="cancelForm">取 消</el-button>
		        <!-- <el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button> -->
				<el-button type="primary" @click="add()">添加</el-button>
		      </div>
		    </div>
		  </el-drawer>
		</template>
		
	</div>
</template>

<script>
	export default{
		data() {
			return{
				form2: {
				     productTypeName: '',
				     productTypeStatus: '',
					 level:'',
					 parentId:'',
				   },
				   form: {
				        productTypeName: '',
				        level: '',
				      },
				 formLabelWidth: '80px',
				 table: false,
				  dialog: false,
				dialog2: false,
				 loading: false,
				//查询条件
				formInline: {
				          productTypeName: '',
				          level: '',
				        },
				//每页行数
				pageSize: 5,
				//总页数
				total: 0,
				// 当前页
				currentPage: 1,
				//商品类型数据
				productType:[]
			}
		},
		methods:{
			async add(){
				this.dialog2 = true
				const {data: res} = await this.$http.post
				(`/productType/addProductType2`,this.form2)
					if(res==true){
						this.selectAll()
						this.$message({
						  message: '添加成功！',
						  type: 'success'
						})
						 this.loading = true;
					}else{
							this.$message({
							  message: '添加失败！',
							  type: 'success'
							})
						}
			},
			 cancelForm() {
			      this.loading = false;
			      this.dialog = false;
			      clearTimeout(this.timer);
			    },
			 
				
			//修改商品类型
			async upOne(id){
				this.dialog = true
				const {data: res} = await this.$http.post
				(`/productType/upProductType/${id}`)
				this.form = res
					console.log(res)
			
			},
			//修改商品类型
			async upOne2(){
				console.log(this.form)
				const {data: res} = await this.$http.post
				(`/productType/upProductType2`,this.form)
				if(res==true){
					this.selectAll()
					this.$message({
					  message: '修改成功！',
					  type: 'success'
					})
					 this.loading = true;
				}else{
						this.$message({
						  message: '修改失败！',
						  type: 'success'
						})
					}
			},
			//删除商品类型
			async delOne(id){
				const {data: res} = await this.$http.post
				(`/productType/delOne/${id}`, )
				if(res==true){
					this.$message({
					  message: '删除成功！',
					  type: 'success'
					})
					this.selectAll()
				}else{
						this.$message({
						  message: '删除失败！',
						  type: 'success'
						})
					}
			},
			handleSizeChange(val) {
				console.log(val)
			  this.pageSize = val
			  this.selectAll()
			},
			handleCurrentChange(val) {
				console.log(val)
			  this.currentPage = val
			  this.selectAll()
			},
			async onSubmit() {
			       const {data: res} = await this.$http.post
			       (`/productType/queryAll/${this.currentPage}/${this.pageSize}`, this.formInline)
			       this.productType = res.list
			       this.total = res.total
			      },
			//查询所有商品类型
			    async selectAll() {
			     const {data: res} = await this.$http.post
			     (`/productType/queryAll/${this.currentPage}/${this.pageSize}`, this.formInline)
			     this.productType = res.list
			     this.total = res.total
			     console.log(res)
				 
				  // const {data: res} = await this.$http.post
				  // (`/outGather/queryAll/${this.currentPage}/${this.pageSize}`, this.queryVo)
				  // this.storage = res.list
				  // this.total = res.total
			   //    console.log(res)
			    },
				  
		},
		created(){
			this.selectAll()
		}
	}
	
</script>

<style scoped>
	.upbtn{
		display: inline;
		position: relative;
		top: -1px;
		left: 10px;
	}
	.delbtn{
		display: inline;
		top: 10px;
		left: 0px;
	}
	.add{
		display: inline;
		width: 50px;
		border: 1px solid black;
		margin: 5px;
		background-color: #fff5ee;
		a{
		text-decoration: none;
		margin: 5px;
		}
	}
	.del{
		display: inline;
		width: 50px;
		border: 1px solid black;
		margin: 5px;
		background-color: #ff4500;
		text-decoration: none;
		a{
		text-decoration: none;
		margin: 5px;
		}
	}
</style>